<template>
  <div class="box">
    <div class="title">
      <van-icon class="icon" name="arrow-left" @click="returnFn" />
      设置
    </div>
    <div class="content">
      <van-cell-group :border="false" clearable>
        <van-field
          label="用户名称"
          v-model="info.username"
          input-align="right"
          clearable
          class="username"
          :border="false"
        />
        <van-field
          label="账号"
          v-model="info.zhanghao"
          readonly
          input-align="right"
          :border="false"
        />
        <van-field
          label="我的邀请人"
          v-model="info.yaoqingren"
          readonly
          input-align="right"
        />
      </van-cell-group>
    </div>
    <div class="button" @click="submit">提 交</div>
  </div>
</template>

<script>
import { defineComponent, reactive, getCurrentInstance, onMounted } from "vue";
import { setUserName } from "../../../api/http.js";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const info = reactive({
      username: "",
      zhanghao: "",
      yaoqingren: "",
    });
    const getInfo = () => {
      const userInfo = JSON.parse(localStorage.getItem("info"));
      info.username = userInfo.username;
      info.zhanghao = userInfo.phone;
      info.yaoqingren = userInfo.pusername;
    };
    const returnFn = () => {
      router.go(-1);
    };
    const submit = async () => {
      if (info == "") return proxy.$toast.fail("不能为空");
      const data = await setUserName({ username: info.username });
      console.log("修改用户名---", data);
      proxy.$toast({
        type: "success",
        forbidClick: true,
        message: "修改成功",
      });
      setTimeout(() => {
        returnFn();
      }, 2000);
    };

    onMounted(() => {
      getInfo();
    });

    return {
      returnFn,
      info,
      submit,
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  min-height: 100vh;
  background-color: var(--backColorTwo);
  .title {
    width: 100%;
    height: 60px;
    font-size: 1.125rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: var(--textColor);
    background-color: var(--backColor);
    text-align: center;
    line-height: 60px;
    position: relative;
    padding: 0 4%;

    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
      font-size: 1.5rem;
      transform: translateY(-50%);
    }
  }
  .content {
    padding: 15px 4%;
    margin-top: 10px;
    background-color: var(--backColor);
    color: var(--textColor);

    .van-cell {
      background-color: transparent;
      color: var(--textColor);
    }

    .username {
      /deep/ .van-field__control {
        color: #d4b88c;
        opacity: 0.7;
      }
    }

    /deep/ .van-field__label {
      color: var(--textColor);
      opacity: 0.9;
      font-size: 0.95rem;
    }

    /deep/ .van-field__control {
      color: var(--textColor);
      opacity: 0.7;
      font-size: 0.8rem;
    }

    /deep/ .van-cell::after {
      border-bottom: none;
    }
  }
  .button {
    width: 60%;
    height: 40px;
    background: #d8b88c;
    border-radius: 50px;
    font-size: 1rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: 50px;
    left: 20%;
    line-height: 40px;
  }
}
</style>
